<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link rel="stylesheet" href="css/weather.css">
</head>
<body>
<div id="app">
<h1>天气预报</h1>
<div>
    <input @keydown.enter="getWeather" v-model="city" class="serach" type="text">
    <input v-on:click="getWeather" class="doSerach" type="button" value="搜索">
</div>
<ul class="inforList">
    <li>
        <span>{{yesterday.date}}</span>
        <span>{{yesterday.type}}</span>
        <span>{{yesterday.low}}</span>
        <span>{{yesterday.high}}</span>
        <span>{{yesterday.fx}}</span>
    </li>
    <li v-for="item in forecast">
        <span>{{item.date}}</span>
        <span>{{item.type}}</span>
        <span>{{item.low}}</span>
        <span>{{item.high}}</span>
        <span>{{item.fengxiang}}</span>
    </li>
</ul>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.main.js"></script>
<script>
    var myTest = new Vue({
        el:"#app",
        data:{
            yesterday: {},
            forecast:[],
            city:"武汉"
        },
        methods:{
            getWeather:function () {
                axios.get("http://wthrcdn.etouch.cn/weather_mini",{params: {city:this.city}})
                    .then((results)=> {
                        if(results!=null) {
                            data = results.data.data;
                            this.yesterday = data.yesterday;
                            this.forecast = data.forecast;
                        }
                        this.city=data.city;// 设置输入框内的值为当前城市

                    })
                    .catch()
            }
        },
        created(){
            this.getWeather();
        }
    })
</script>
</body>
</html>